<!-- 
  深层级过渡与显式过渡时长

  过渡模式
    mode 属性
      out-in      先出后进入
      in-out      先进再出

 -->

<template>
  <div>
    <h1>纯CSS动画效果</h1>

    <van-button @click="isShow = !isShow">Toggle</van-button>

    <Transition name="fade">
      <div key="1" class="box" v-if="isShow"></div>
      <div key="2" class="box2" v-else></div>
    </Transition>

    <hr />

    <Transition name="a" :duration="{ enter: 200, leave: 300 }">
      <div class="box" v-if="isShow">
        <div class="inner"></div>
      </div>
    </Transition>

    <hr />

    <Transition
      enter-active-class="animate__animated animate__shakeX"
      leave-active-class="animate__animated animate__shakeY"
    >
      <div class="box" v-if="isShow"></div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isShow = ref(true)
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
  // transition: all 5s ease;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: aqua;
}

.a-enter-from .inner {
  height: 0px;
}

.a-enter-active .inner {
  transition: height 0.5s ease;
}

.a-leave-to .inner {
  height: 0px;
}

.a-leave-active .inner {
  transition: height 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  transform: translate3d(0, -100%, 0);
}
.fade-enter-active,
.fade-laeve-active {
  transition: transform 0.5s ease;
}
</style>
